<template>
  <div class="box-app">
    <EsHeader title="购物车列表"></EsHeader>

    <EsGoods
      v-for="item in goods"
      :key="item.id"
      :id="item.id"
      :title="item.goods_name"
      :thumb="item.goods_img"
      :state="item.goods_state"
      :price="item.goods_price"
      @state-change="onStateChange"
    >
      <EsCounter :count="item.goods_count" @count-change="onCountChange(item.id, $event)" />
    </EsGoods>

    <EsFooter
      :amount="$store.getters.amount"
      :total="$store.getters.total"
      :full="$store.getters.isFull"
      @full-change="onFullChange"
    ></EsFooter>
  </div>
</template>

<script setup>
// 依赖
import { useStore } from 'vuex'
import { computed } from 'vue'

// 组件
import EsHeader from '@/components/EsHeader.vue'
import EsFooter from './components/EsFooter.vue'
import EsGoods from './components/EsGoods.vue'
import EsCounter from './components/EsCounter.vue'

// vuex
const store = useStore()
store.dispatch('initCartList')

// 商品列表数据
const goods = computed(() => store.state.cart)

// 监听状态变化
const onStateChange = e => store.commit('updateGoodsState', e)
// 监听数量变化
const onCountChange = (id, count) => store.commit('updateGoodsCount', { id, count })
// 监听全选状态的变化
const onFullChange = e => store.commit('updateAllState', e)
</script>

<style lang="less" scoped>
.box-app {
  padding: 45px 0 45px 0;
}
</style>
